<template>
	<view class="screenin">
		<view class="personshow">
			<image class="person_picture" :src="picture"></image>
			
		</view>
		<view class="line" 
			v-for="item in element" key="id"
			@click="jumpTo(item.url)">
			<image class="line-image" :src="item.src"></image>
			<text >{{item.name}}</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	var picture = "http://127.0.0.1:9000/bucket-chat/2fde0c1e020c92d14122e13125e876d.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20241215%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20241215T051709Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=26ed691ac6588905510acb250d7e1f6d1ed93164a63d40710676b2db14f035c9"
	
	var element =[
		{
			id :1,
			name:'信息修改',
			src:'/static/person-m.png',
			url:'/pages/person/person_infromation/person_infromation'
		},
		{
			id :2,
			name:'漂流瓶管理',
			src:'/static/bottle-m.png',
			url:'/pages/person/person_infromation/managger_bottle'
		},
	]
	const jumpTo = (lurl:string) => {  
		console.log(lurl);
	    uni.navigateTo({  
	        url: lurl
	    });  
	};

</script>
	

<style>
.line{
	width: 100%;
	height: 115rpx;
	display: flex;
	align-items:center;
	background: #F0F2F5;
	border-color: #CDD0D6;
	border-bottom-style:solid;
	border-radius: 20rpx;
}
.line-image{
	width: 30px;
	height: 30px;
	margin-right: 20rpx;
}
.screenin{
	width: 100%;
	height: 100%;
	background: white;
}
.personshow{
	display: flex;
	justify-content: center; /* 水平居中 */  
	align-items: center; 
	border-bottom-style: solid;
	margin-bottom: 80rpx;
	border-color: black;
	border-width: 5rpx;  
	height: 370rpx;
	width: 100%;
	background: url();
	background-size: cover; /* 使背景图像覆盖整个元素 */  
	background-position: center; /* 背景图像居中对齐 */  
	background-repeat: no-repeat;
}
.person_picture{
	width: 300rpx;
	height: 250rpx;
	border-style: solid;
	border-width: 20rpx;
	border-color: aliceblue;
	border-radius: 50%;
}
</style>